Add cert-manager plugin #143

yolossn · 2024-12-30T08:33:48Z

Testing the Cert-Manager Plugin

Prerequisites

A Kubernetes cluster with cert-manager installed
- If you need to install cert-manager, follow the official installation guide
Node.js and npm installed on your system

Steps to Test

Clone the plugins repository:

git clone https://github.com/headlamp-k8s/plugins.git

Switch to the cert-manager branch:
```
git checkout cert-manager
```
Navigate to the cert-manager plugin directory:
```
cd cert-manager
```
Install the required dependencies:
```
npm install
```
Start the plugin in development mode:
```
npm run start
```
Launch Headlamp. You should now see "Cert Manager" in the sidebar.

Optional: Generate Cert-Manager Types

To test the plugin with sample cert-manager resources:

Navigate to the test-files directory:
```
cd test-files
```

Apply the sample configurations to your cluster:

kubectl apply -f clusterIssuer.yaml
kubectl apply -f issuer.yaml
kubectl apply -f certificate.yaml
kubectl apply -f order.yaml
kubectl apply -f app.yaml

This will create:

A ClusterIssuer for Let's Encrypt staging
An Issuer for Let's Encrypt staging
Two Certificate resources (one using ClusterIssuer, one using Issuer)
An Order resource
Sample Nginx deployment with Ingress configurations

Demo

cert-manager.mp4

juv · 2025-01-24T20:23:38Z

This is great 👍

joaquimrocha

Left a couple of small comments. The plugin should also display a special error if the cert-manager is not installed.

cert-manager/README.md

cert-manager/package.json

joaquimrocha · 2025-01-29T14:26:24Z

cert-manager/src/components/certificates/Detail.tsx

+                    },
+                    {
+                      label: 'Last Transition Time',
+                      getter: item => item.lastTransitionTime,


Please use the DateLabel component here:

cert-manager/src/index.tsx

Signed-off-by: yolossn <sannagaraj@microsoft.com>

yolossn · 2025-01-30T10:53:05Z

Addressed the comments and added cert-manager not detected banner.

knrt10

Awesome work @yolossn. Apart from some suggestions, everything looks great

cert-manager/.gitignore

cert-manager/README.md

cert-manager/package.json

cert-manager/README.md

knrt10 · 2025-02-06T01:44:03Z

cert-manager/src/components/clusterIssuers/Detail.tsx

+                                columns={[
+                                  {
+                                    label: 'Class',
+                                    getter: item => item.ingress.class,


same, please fix the object scope

knrt10 · 2025-02-06T01:47:38Z

cert-manager/src/components/issuers/Detail.tsx

+                                columns={[
+                                  {
+                                    label: 'Class',
+                                    getter: item => item.ingress.class,


same please edit scope

knrt10 · 2025-02-06T01:51:32Z

cert-manager/src/components/orders/Detail.tsx

+
+                <IconButton
+                  onClick={() => {
+                    navigator.clipboard.writeText(item.spec.request);


same, please check for errors here

knrt10 · 2025-02-06T01:53:56Z

cert-manager/src/types/challenge.ts

+    };
+    key: string;
+    solver: {
+      http01: {


according to cert-manager docs, should we also add for dns01?

knrt10 · 2025-02-06T01:59:53Z

cert-manager/src/types/order.ts

+  static kind = 'Order';
+  static apiName = 'orders';
+  static apiVersion = ['acme.cert-manager.io/v1'];
+  static isNamespaced = false;


these are namespaced resource

Suggested change

static isNamespaced = false;

static isNamespaced = true;

sniok

good stuff! left a couple of comments

sniok · 2025-02-06T11:57:57Z

cert-manager/src/components/certificateRequests/List.tsx

+        {
+          id: 'approved',
+          label: 'Approved',
+          getValue: certificateRequest => certificateRequest.approved,


for simple cases like this, it's better to use datum field like so:

{ id: 'approved', label: 'Approved', datum: 'approved', }

sniok · 2025-02-06T12:00:53Z

cert-manager/src/components/certificateRequests/List.tsx

+import { NotInstalledBanner } from '../common/NotInstalledBanner';
+
+export function CertificateRequestsList() {
+  const [isManagerInstalled, setIsManagerInstalled] = useState(false);


this part (useState + useEffect) is repeated in each List component. please extract it into a it's own hook.

this starts with value false which will render NotInstalledBanner by default, even if it is installed. I'd recommend adding additional field isManagerCheckLoading that will keep track whether the check is still loading. this will avoid flashing "NotInstalledBanner"

also this check is loaded every time you enter the page, it should be fetched once and remember the value

sniok · 2025-02-06T12:03:29Z

cert-manager/src/index.tsx

+});
+
+// 1. certificates.cert-manager.io
+registerSidebarEntry({


this pattern repeats here, registerSidebarEntry + registerRoute for Details and List could be put in a function

sniok · 2025-02-06T12:04:10Z

cert-manager/src/types/certificate.ts

+export class Certificate extends KubeObject<CertManagerCertificate> {
+  static kind = 'Certificate';
+  static apiName = 'certificates';
+  static apiVersion = ['cert-manager.io/v1'];


apiVersion can be just a string, no need for an array here

sniok · 2025-02-06T12:05:24Z

cert-manager/src/utils.ts

@@ -0,0 +1,12 @@
+import { ApiProxy } from '@kinvolk/headlamp-plugin/lib';


this file could be named isCertManagerInstalled since there's nothing else here

sniok · 2025-02-06T12:06:28Z

cert-manager/src/types/certificate.ts

@@ -0,0 +1,58 @@
+import { KubeObject } from '@kinvolk/headlamp-plugin/lib/k8s/cluster';


/types/ folder name is a bit misleading. types usually means only typescript type definitions, here we define classes. Maybe /model/ would be better?

yolossn force-pushed the cert-manager branch 2 times, most recently from edef4f5 to b8ebea9 Compare December 30, 2024 08:45

yolossn force-pushed the cert-manager branch from b8ebea9 to abaea3a Compare January 19, 2025 13:29

yolossn marked this pull request as ready for review January 19, 2025 13:52

yolossn force-pushed the cert-manager branch from abaea3a to 320fac3 Compare January 19, 2025 13:54

yolossn requested a review from a team January 19, 2025 13:55

joaquimrocha requested changes Jan 29, 2025

View reviewed changes

yolossn force-pushed the cert-manager branch from 320fac3 to c574508 Compare January 30, 2025 10:47

yolossn requested a review from joaquimrocha January 30, 2025 10:47

cert-manager: Add cert-manager plugin

0e0990c

Signed-off-by: yolossn <sannagaraj@microsoft.com>

yolossn force-pushed the cert-manager branch from c574508 to 0e0990c Compare January 30, 2025 10:51

knrt10 reviewed Feb 6, 2025

View reviewed changes

sniok requested changes Feb 6, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add cert-manager plugin #143

Add cert-manager plugin #143

yolossn commented Dec 30, 2024 •

edited

Loading

juv commented Jan 24, 2025

joaquimrocha left a comment

joaquimrocha Jan 29, 2025

yolossn commented Jan 30, 2025

knrt10 left a comment

knrt10 Feb 6, 2025

knrt10 Feb 6, 2025

knrt10 Feb 6, 2025

knrt10 Feb 6, 2025

knrt10 Feb 6, 2025

sniok left a comment

sniok Feb 6, 2025

sniok Feb 6, 2025

sniok Feb 6, 2025

sniok Feb 6, 2025

sniok Feb 6, 2025

sniok Feb 6, 2025

		@@ -0,0 +1,12 @@
		import { ApiProxy } from '@kinvolk/headlamp-plugin/lib';

		@@ -0,0 +1,58 @@
		import { KubeObject } from '@kinvolk/headlamp-plugin/lib/k8s/cluster';

Add cert-manager plugin #143

Are you sure you want to change the base?

Add cert-manager plugin #143

Conversation

yolossn commented Dec 30, 2024 • edited Loading

Testing the Cert-Manager Plugin

Prerequisites

Steps to Test

Optional: Generate Cert-Manager Types

juv commented Jan 24, 2025

joaquimrocha left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yolossn commented Jan 30, 2025

knrt10 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sniok left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yolossn commented Dec 30, 2024 •

edited

Loading